<template>
	<view class="container">
		
		<!-- 加载状态 -->
		<view v-if="loading" class="loading">
			<text>正在加载系列赛列表...</text>
		</view>
		
		<!-- 系列赛选择列表 -->
		<view v-if="!loading && !selectedSeries && seriesList.length > 0" class="series-list">
			<view class="list-title">
				<text>选择系列赛查看执裁记录</text>
			</view>
			
			<view v-for="(series, index) in seriesList" :key="index" class="series-item" @click="selectSeries(series)">
				<view class="series-info">
					<text class="series-name">{{ series.title }}</text>
					<text class="series-meta">{{ series.level }} · {{ series.location }}</text>
					<!-- 新场次标记 -->
					<view v-if="hasNewMatches(series)" class="new-match-badge">
						<view class="red-dot"></view>
						<text class="new-text">{{ getNewMatchText(series) }}</text>
					</view>
				</view>
				<view class="arrow-section">
					<!-- 简单红点标记 -->
					<view v-if="hasNewMatches(series)" class="simple-red-dot"></view>
					<view class="arrow">></view>
				</view>
			</view>
		</view>
		
		<!-- 无系列赛状态 -->
		<view v-if="!loading && !selectedSeries && seriesList.length === 0" class="empty">
			<text class="empty-icon">📋</text>
			<text class="empty-text">您还没有创建过系列赛</text>
			<text class="empty-tip">请先发布系列赛后再查看执裁记录</text>
		</view>
		
		<!-- 错误状态 -->
		<view v-if="error" class="error">
			<text class="error-text">{{ error }}</text>
			<button @click="loadSeriesList" class="retry-btn">重试</button>
		</view>
		
		<!-- 已选择系列赛的执裁记录 -->
		<view v-if="selectedSeries" class="selected-series">
			<!-- 紧凑的头部导航区域 -->
			<view class="compact-header">
				<!-- 系列赛信息和返回按钮 -->
				<view class="header-row">
					<view class="series-info">
						<text class="series-title">{{ selectedSeries.title }}</text>
						<text class="series-meta">{{ selectedSeries.level }} · {{ selectedSeries.location }}</text>
					</view>
					<button @click="goBack" class="back-btn">
						<uni-icons type="back" size="16" color="#fff"></uni-icons>
						<text class="back-text">返回</text>
					</button>
				</view>
				
				<!-- 视图切换和操作按钮 -->
				<view class="control-row">
					<view class="tabs">
						<view 
							class="tab" 
							:class="{ active: currentView === 'matches' }"
							@click="switchView('matches')"
						>
							<text class="tab-icon">📋</text>
							<text class="tab-text">比赛视图</text>
						</view>
						<view 
							class="tab" 
							:class="{ active: currentView === 'referees' }"
							@click="switchView('referees')"
						>
							<text class="tab-icon">👤</text>
							<text class="tab-text">裁判员视图</text>
						</view>
					</view>
					<button v-if="recordsLoaded" @click="exportData" class="export-btn" :disabled="exporting">
						<uni-icons type="download" size="14" color="#fff"></uni-icons>
						<text class="export-text">{{ exporting ? '导出中' : 'Excel' }}</text>
					</button>
				</view>
			</view>
			
			<!-- 紧凑的统计数据 -->
			<view v-if="recordsLoaded" class="stats-bar">
				<view v-if="currentView === 'matches'" class="stats-items">
					<view class="stat-item">
						<text class="stat-number">{{ totalRecords }}</text>
						<text class="stat-label">总记录数</text>
					</view>
					<view class="stat-divider"></view>
					<view class="stat-item">
						<text class="stat-number">{{ confirmedRecords }}</text>
						<text class="stat-label">已确认</text>
					</view>
					<view class="stat-divider"></view>
					<view class="stat-item">
						<text class="stat-number">{{ pendingRecords }}</text>
						<text class="stat-label">待确认</text>
					</view>
				</view>
				
				<view v-if="currentView === 'referees'" class="stats-items">
					<view class="stat-item">
						<text class="stat-number">{{ totalReferees }}</text>
						<text class="stat-label">参与裁判</text>
					</view>
					<view class="stat-divider"></view>
					<view class="stat-item">
						<text class="stat-number">{{ totalRecords }}</text>
						<text class="stat-label">总执裁场次</text>
					</view>
					<view class="stat-divider"></view>
					<view class="stat-item">
						<text class="stat-number">{{ averageRating }}</text>
						<text class="stat-label">平均评分</text>
					</view>
				</view>
			</view>
			
			<!-- 记录加载状态 -->
			<view v-if="recordsLoading" class="loading">
				<text>正在加载执裁记录...</text>
			</view>
			
			<!-- 比赛视图内容 -->
			<view v-if="recordsLoaded && currentView === 'matches'" class="matches-view">
				<view v-if="matchSchedules.length === 0" class="no-data">
					<text class="no-data-text">该系列赛暂无执裁记录</text>
				</view>
				
				<view v-for="(day, index) in matchSchedules" :key="index" class="day-section">
					<view class="day-header">
						<text class="day-title">{{ day.date }} {{ day.weekday }}</text>
					</view>
					
					<view v-for="(session, sIndex) in day.sessions" :key="sIndex" class="session-card">
						<view class="session-info">
							<text class="session-title">{{ session.timeRange }}</text>
							<text class="session-match">{{ session.homeTeam }} vs {{ session.awayTeam }}</text>
							<text class="session-type">{{ session.matchType }}</text>
						</view>
						
						<view class="referees-list">
							<view v-for="(referee, rIndex) in session.referees" :key="rIndex" class="referee-item">
								<view class="referee-header">
									<view class="referee-basic">
										<text class="referee-name">{{ referee.refereeName }}</text>
										<text class="referee-position" :class="{
											'position-main': referee.position === '主裁判',
											'position-assistant': referee.position === '助理裁判', 
											'position-fourth': referee.position === '第四官员',
											'position-supervisor': referee.position === '裁判监督'
										}">{{ referee.position }}</text>
									</view>
									<view class="referee-stats">
										<text class="rating-text" :class="{
											'rating-excellent': referee.rating === '优秀',
											'rating-good': referee.rating === '良好',
											'rating-fair': referee.rating === '一般' || referee.rating === '及格', 
											'rating-poor': referee.rating === '较差'
										}">{{ referee.rating || '未评分' }}</text>
										<text class="attendance-text" :class="{
											'attendance-normal': referee.attendance === '正常出勤',
											'attendance-late': referee.attendance === '迟到',
											'attendance-early': referee.attendance === '早退',
											'attendance-absent': referee.attendance === '缺勤'
										}">{{ referee.attendance }}</text>
									</view>
								</view>
								<view v-if="referee.comment && referee.comment !== '无评语'" class="referee-comment">
									<text class="comment-label">监督评语：</text>
									<text class="comment-text">{{ referee.comment }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 裁判员视图内容 -->
			<view v-if="recordsLoaded && currentView === 'referees'" class="referees-view">
				<view v-if="refereeStats.length === 0" class="no-data">
					<text class="no-data-text">该系列赛暂无裁判员执裁记录</text>
				</view>
				
				<view v-for="(referee, index) in refereeStats" :key="index" class="referee-card">
					<view class="referee-header">
						<text class="referee-name">{{ referee.refereeName }}</text>
						<text class="total-matches">{{ referee.totalMatches }}场</text>
					</view>
					
					<view class="referee-details">
						<view class="position-stats">
							<view v-for="(count, position) in referee.positionStats" :key="position" class="position-item">
								<text class="position-name" :class="{
								'position-main': position === '主裁判',
								'position-assistant': position === '边裁判',
								'position-fourth': position === '第四官员', 
								'position-supervisor': position === '裁判监督'
							}">{{ position }}</text>
								<text class="position-count">{{ count }}场</text>
							</view>
						</view>
						
						<view class="referee-metrics">
							<text class="metric-item">平均评分: {{ referee.averageRating || '无' }}</text>
							<text class="metric-item">出勤率: {{ referee.attendanceRate }}%</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading: true,
			error: '',
			seriesList: [],
			selectedSeries: null,
			currentView: 'matches', // matches | referees
			recordsLoading: false,
			recordsLoaded: false,
			exporting: false,
			
			// 统计数据
			totalRecords: 0,
			confirmedRecords: 0,
			pendingRecords: 0,
			totalReferees: 0,
			averageRating: '无',
			
			// 数据
			matchSchedules: [],
			refereeStats: []
		}
	},
	
	onLoad() {
		this.loadSeriesList()
	},
	
	methods: {
		// 加载系列赛列表
		async loadSeriesList() {
			this.loading = true
			this.error = ''
			
			try {
				const userInfoStr = uni.getStorageSync('userInfo')
				if (!userInfoStr) {
					this.error = '请先登录'
					return
				}
				
				const userInfo = JSON.parse(userInfoStr)
				const userId = userInfo._id || userInfo.userId || userInfo.id
				
				console.log('加载用户系列赛列表，用户ID:', userId)
				
				// 调用云对象获取用户发布的系列赛
				const matchObject = uniCloud.importObject('match-object')
				const result = await matchObject.getMyMatches({ userId })
				
				if (result.code === 0) {
					this.seriesList = result.data?.list || []
					console.log('获取到系列赛列表:', this.seriesList.length, '个')
				} else {
					this.error = result.message || '获取系列赛列表失败'
				}
			} catch (error) {
				console.error('加载系列赛列表失败:', error)
				this.error = '加载失败，请检查网络连接'
			} finally {
				this.loading = false
			}
		},
		
		// 选择系列赛
		selectSeries(series) {
			console.log('选择系列赛:', series.title)
			this.selectedSeries = series
			
			// 清除新场次标记（模拟用户已查看）
			this.clearNewMatchFlag(series)
			
			this.loadSeriesRecords()
		},
		
		// 切换视图
		switchView(view) {
			if (this.currentView === view) return
			
			this.currentView = view
			// 切换视图时总是重新加载对应的数据
			this.loadSeriesRecords()
		},
		
		// 加载系列赛执裁记录
		async loadSeriesRecords() {
			this.recordsLoading = true
			this.recordsLoaded = false
			
			try {
				console.log('加载系列赛执裁记录，ID:', this.selectedSeries._id, '视图:', this.currentView)
				
				const service = uniCloud.importObject('referee-record-service')
				
				if (this.currentView === 'matches') {
					// 加载比赛视图数据
					const res = await service.getSeriesMatchView({
						matchId: this.selectedSeries._id
					})
					
					if (res.code === 0) {
						this.matchSchedules = res.data.matchSchedules || []
						this.totalRecords = res.data.totalRecords || 0
						this.confirmedRecords = res.data.confirmedRecords || 0
						this.pendingRecords = res.data.pendingRecords || 0
						
						console.log('比赛视图加载成功，记录数:', this.totalRecords)
					} else {
						throw new Error(res.message || '加载比赛视图失败')
					}
				} else {
					// 加载裁判员视图数据
					const res = await service.getSeriesRefereeView({
						matchId: this.selectedSeries._id,
						sortBy: 'totalMatches',
						sortOrder: 'desc'
					})
					
					if (res.code === 0) {
						this.refereeStats = res.data.refereeStats || []
						this.totalReferees = res.data.totalReferees || 0
						this.totalRecords = res.data.totalRecords || 0
						this.averageRating = res.data.averageRating || '无'
						
						console.log('裁判员视图加载成功，裁判数:', this.totalReferees)
					} else {
						throw new Error(res.message || '加载裁判员视图失败')
					}
				}
				
				this.recordsLoaded = true
				
			} catch (error) {
				console.error('加载执裁记录失败:', error)
				this.error = error.message || '加载执裁记录失败'
				
				// 使用模拟数据作为fallback
				this.loadMockData()
			} finally {
				this.recordsLoading = false
			}
		},
		
		// 加载模拟数据（用于测试）
		loadMockData() {
			console.log('使用模拟数据')
			
			if (this.currentView === 'matches') {
				this.matchSchedules = [
					{
						date: '2024-01-15',
						weekday: '星期一',
						sessions: [
							{
								timeRange: '09:00-10:30',
								homeTeam: '青年队A',
								awayTeam: '青年队B',
								matchType: '青少年组',
								referees: [
									{ refereeName: '张三', position: '主裁判', rating: '优秀' },
									{ refereeName: '李四', position: '边裁判', rating: '良好' }
								]
							}
						]
					}
				]
				this.totalRecords = 2
				this.confirmedRecords = 2
				this.pendingRecords = 0
			} else {
				this.refereeStats = [
					{
						refereeName: '张三',
						totalMatches: 5,
						positionStats: {
							'主裁判': 3,
							'边裁判': 2
						},
						averageRating: '优秀',
						attendanceRate: 100
					},
					{
						refereeName: '李四',
						totalMatches: 3,
						positionStats: {
							'边裁判': 3
						},
						averageRating: '良好',
						attendanceRate: 100
					}
				]
				this.totalReferees = 2
				this.totalRecords = 8
				this.averageRating = '良好'
			}
			
			this.recordsLoaded = true
		},
		
		// 导出裁判员统计数据
		async exportData() {
			this.exporting = true
			
			try {
				console.log('导出裁判员执裁统计数据')
				
				const service = uniCloud.importObject('referee-record-service')
				const res = await service.exportSeriesRecords({
					matchId: this.selectedSeries._id,
					exportType: 'referees'  // 固定导出裁判员数据
				})
				
				if (res.code === 0) {
					uni.showToast({
						title: '导出成功',
						icon: 'success'
					})
					console.log('导出数据:', res.data)
					console.log('文件名:', res.data.fileName)
					console.log('记录数:', res.data.totalRecords)
				} else {
					throw new Error(res.message || '导出失败')
				}
			} catch (error) {
				console.error('导出失败:', error)
				uni.showToast({
					title: error.message || '导出失败',
					icon: 'none'
				})
			} finally {
				this.exporting = false
			}
		},
		
		// 返回系列赛选择
		goBack() {
			this.selectedSeries = null
			this.recordsLoaded = false
			this.currentView = 'matches'
			this.matchSchedules = []
			this.refereeStats = []
			this.totalRecords = 0
			this.confirmedRecords = 0
			this.pendingRecords = 0
			this.totalReferees = 0
			this.averageRating = '无'
		},
		
		// 判断是否有新比赛场次
		hasNewMatches(series) {
			// 优先使用后端返回的标记
			if (series.hasNewMatches !== undefined) {
				return series.hasNewMatches
			}
			
			// 检查后端返回的 newMatchCount 字段
			if (series.newMatchCount && series.newMatchCount > 0) {
				return true
			}
			
			// 检查本地存储的查看状态（备用方案）
			try {
				const viewedKey = `viewed_series_${series._id || series.title}`
				const lastViewedTime = uni.getStorageSync(viewedKey)
				
				if (!lastViewedTime) {
					// 从未查看过，视为有新内容
					return true
				}
				
				if (lastViewedTime && series.lastUpdateTime) {
					const lastViewed = new Date(lastViewedTime)
					const lastUpdate = new Date(series.lastUpdateTime)
					
					// 如果最后更新时间晚于最后查看时间，显示新标记
					if (lastUpdate > lastViewed) {
						return true
					}
				}
			} catch (error) {
				console.error('检查查看状态失败:', error)
			}
			
			// 如果有最后更新时间，检查是否是最近更新
			if (series.lastUpdateTime) {
				const lastUpdate = new Date(series.lastUpdateTime)
				const now = new Date()
				const daysDiff = (now - lastUpdate) / (1000 * 60 * 60 * 24)
				
				// 如果是最近3天内更新的，显示新标记
				return daysDiff <= 3
			}
			
			// 默认返回false
			return false
		},
		
		// 获取新场次文本提示
		getNewMatchText(series) {
			if (series.newMatchCount && series.newMatchCount > 0) {
				return `${series.newMatchCount}场新比赛`
			}
			
			return '有新场次'
		},
		
		// 清除新场次标记
		async clearNewMatchFlag(series) {
			try {
				// 调用后端API标记用户已查看
				console.log('标记系列赛已查看:', series._id, series.title)
				
				const matchObject = uniCloud.importObject('match-object')
				const result = await matchObject.markSeriesAsViewed({
					seriesId: series._id
				})
				
				if (result.code === 0) {
					console.log('标记查看成功:', result.message)
					
					// 立即更新本地数据
					if (series.newMatchCount) {
						series.newMatchCount = 0
					}
					series.hasNewMatches = false
				} else {
					console.error('标记查看失败:', result.message)
				}
			} catch (error) {
				console.error('调用标记查看API失败:', error)
			}
			
			// 备用方案：使用本地存储
			try {
				const viewedKey = `viewed_series_${series._id || series.title}`
				const currentTime = new Date().toISOString()
				uni.setStorageSync(viewedKey, currentTime)
			} catch (error) {
				console.error('保存查看状态失败:', error)
			}
		}

	}
}
</script>

<style lang="scss" scoped>
.container {
	padding: 16rpx;
	background: #f5f5f5;
	min-height: 100vh;
}



.loading {
	text-align: center;
	padding: 60rpx 0;
	color: #666;
	font-size: 24rpx;
	background: white;
	border-radius: 12rpx;
	margin-bottom: 12rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.series-list {
	background: white;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.list-title {
	padding: 20rpx 24rpx;
	border-bottom: 1rpx solid #f0f0f0;
	font-size: 26rpx;
	font-weight: 600;
	color: #333;
	background: #f8f9fa;
}

.series-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 24rpx;
	border-bottom: 1rpx solid #f0f0f0;
	transition: all 0.2s ease;
	
	&:last-child {
		border-bottom: none;
	}
	
	&:active {
		background: #f8f8f8;
		transform: scale(0.98);
	}
}

.series-info {
	flex: 1;
	min-width: 0;
	position: relative;
}

.series-name {
	font-size: 26rpx;
	font-weight: 600;
	color: #333;
	display: block;
	margin-bottom: 6rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.series-meta {
	font-size: 22rpx;
	color: #666;
	display: block;
}

/* 新场次标记 */
.new-match-badge {
	display: flex;
	align-items: center;
	gap: 6rpx;
	margin-top: 8rpx;
	padding: 4rpx 8rpx;
	background: linear-gradient(135deg, #ff6b6b, #ff5252);
	border-radius: 12rpx;
	align-self: flex-start;
	box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);
	animation: pulse 2s infinite;
}

.red-dot {
	width: 8rpx;
	height: 8rpx;
	background: #fff;
	border-radius: 50%;
	flex-shrink: 0;
}

.new-text {
	font-size: 20rpx;
	color: #fff;
	font-weight: 600;
	line-height: 1;
}

/* 右侧箭头区域 */
.arrow-section {
	display: flex;
	align-items: center;
	gap: 8rpx;
	margin-left: 12rpx;
	flex-shrink: 0;
}

/* 简单红点标记 */
.simple-red-dot {
	width: 12rpx;
	height: 12rpx;
	background: linear-gradient(135deg, #ff6b6b, #ff5252);
	border-radius: 50%;
	border: 2rpx solid #fff;
	box-shadow: 0 2rpx 6rpx rgba(255, 107, 107, 0.4);
	animation: bounce 1.5s infinite;
}

.arrow {
	font-size: 24rpx;
	color: #ccc;
}

/* 动画效果 */
@keyframes pulse {
	0% {
		box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);
	}
	50% {
		box-shadow: 0 2rpx 12rpx rgba(255, 107, 107, 0.6);
		transform: scale(1.02);
	}
	100% {
		box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);
	}
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-4rpx);
	}
	60% {
		transform: translateY(-2rpx);
	}
}

.empty {
	background: white;
	border-radius: 12rpx;
	padding: 60rpx 30rpx;
	text-align: center;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.empty-icon {
	font-size: 60rpx;
	display: block;
	margin-bottom: 16rpx;
	opacity: 0.6;
}

.empty-text {
	font-size: 26rpx;
	color: #999;
	display: block;
	margin-bottom: 8rpx;
	font-weight: 500;
}

.empty-tip {
	font-size: 22rpx;
	color: #ccc;
	display: block;
}

.error {
	background: #fff2f0;
	border: 1rpx solid #ffccc7;
	border-radius: 12rpx;
	padding: 24rpx;
	text-align: center;
	box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.1);
}

.error-text {
	color: #ff4d4f;
	margin-bottom: 16rpx;
	display: block;
	font-size: 24rpx;
}

.retry-btn {
	background: linear-gradient(135deg, #1BAE76, #52c41a);
	color: white;
	border: none;
	border-radius: 20rpx;
	padding: 12rpx 24rpx;
	font-size: 24rpx;
	box-shadow: 0 2rpx 8rpx rgba(27, 174, 118, 0.2);
}

.selected-series {
	.compact-header {
		background: white;
		border-radius: 12rpx;
		margin-bottom: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
		
		.header-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 24rpx;
			border-bottom: 1rpx solid #f0f0f0;
			
			.series-info {
				flex: 1;
				min-width: 0;
				
				.series-title {
					font-size: 28rpx;
					font-weight: 600;
					color: #333;
					display: block;
					margin-bottom: 6rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				
				.series-meta {
					font-size: 22rpx;
					color: #666;
					display: block;
				}
			}
			
			.back-btn {
				background: linear-gradient(135deg, #8e8e93, #aeaeb2);
				color: white;
				border: none;
				border-radius: 20rpx;
				padding: 8rpx 16rpx;
				font-size: 22rpx;
				display: flex;
				align-items: center;
				gap: 4rpx;
				margin-left: 16rpx;
				flex-shrink: 0;
				
				.back-text {
					color: #fff;
					font-size: 22rpx;
				}
			}
		}
		
		.control-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 16rpx 24rpx;
			
			.tabs {
				display: flex;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 8rpx;
				flex: 1;
				margin-right: 12rpx;
				box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
				
				.tab {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 8rpx;
					padding: 20rpx 0;
					border-radius: 12rpx;
					transition: all 0.3s ease;
					
					&.active {
						background: linear-gradient(135deg, #43CF7C 0%, #3BC46E 100%);
						box-shadow: 0 4rpx 12rpx rgba(67, 207, 124, 0.3);
						
						.tab-text {
							color: #FFFFFF;
							font-weight: 600;
						}
					}
					
					.tab-icon {
						font-size: 28rpx;
					}
					
					.tab-text {
						font-size: 28rpx;
						color: #999999;
						transition: all 0.3s ease;
					}
				}
			}
			
			.export-btn {
				background: linear-gradient(135deg, #007aff, #5ac8fa);
				color: white;
				border: none;
				border-radius: 20rpx;
				padding: 8rpx 16rpx;
				font-size: 22rpx;
				display: flex;
				align-items: center;
				gap: 4rpx;
				flex-shrink: 0;
				box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.2);
				
				&:disabled {
					background: #ccc;
					box-shadow: none;
				}
				
				.export-text {
					color: #fff;
					font-size: 22rpx;
				}
			}
		}
	}
}

.stats-bar {
	background: white;
	border-radius: 12rpx;
	margin-bottom: 12rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	
	.stats-items {
		display: flex;
		align-items: center;
		padding: 16rpx 24rpx;
		
		.stat-item {
			flex: 1;
			text-align: center;
			
			.stat-number {
				font-size: 30rpx;
				font-weight: 600;
				color: #1BAE76;
				display: block;
				margin-bottom: 4rpx;
			}
			
			.stat-label {
				font-size: 22rpx;
				color: #666;
				display: block;
			}
		}
		
		.stat-divider {
			width: 1rpx;
			height: 32rpx;
			background-color: #e5e5ea;
			margin: 0 8rpx;
		}
	}
}

.matches-view, .referees-view {
	.no-data {
		background: white;
		border-radius: 12rpx;
		padding: 60rpx 30rpx;
		text-align: center;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	}
	
	.no-data-text {
		color: #999;
		font-size: 26rpx;
	}
}

.day-section {
	margin-bottom: 20rpx;
}

.day-header {
	margin-bottom: 10rpx;
}

.day-title {
	font-size: 26rpx;
	font-weight: 600;
	color: #333;
	padding: 8rpx 16rpx;
	background: #f8f9fa;
	border-radius: 20rpx;
	border-left: 4rpx solid #1BAE76;
	display: inline-block;
}

.session-card {
	background: white;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 12rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	border-left: 3rpx solid #e5e5ea;
}

.session-info {
	margin-bottom: 16rpx;
}

.session-title {
	font-size: 24rpx;
	font-weight: 600;
	color: #333;
	display: block;
	margin-bottom: 6rpx;
}

.session-match {
	font-size: 22rpx;
	color: #666;
	display: block;
	margin-bottom: 4rpx;
}

.session-type {
	font-size: 20rpx;
	color: #1BAE76;
	display: inline-block;
	background: rgba(27, 174, 118, 0.1);
	padding: 2rpx 8rpx;
	border-radius: 10rpx;
}

.referees-list {
	border-top: 1rpx solid #f0f0f0;
	padding-top: 16rpx;
}

.referee-item {
	background: #f8f9fa;
	border-radius: 10rpx;
	padding: 14rpx;
	margin-bottom: 10rpx;
	border-left: 3rpx solid #1BAE76;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.referee-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 12rpx;
}

.referee-basic {
	flex: 1;
}

.referee-name {
	font-size: 24rpx;
	color: #333;
	display: block;
	margin-bottom: 5rpx;
}

.referee-position {
	font-size: 20rpx;
	color: white;
	padding: 4rpx 10rpx;
	border-radius: 10rpx;
	display: inline-block;
	
	&.position-main {
		background: #ff6b6b;
	}
	
	&.position-assistant {
		background: #4ecdc4;
	}
	
	&.position-fourth {
		background: #45b7d1;
	}
	
	&.position-supervisor {
		background: #96ceb4;
	}
}

.referee-stats {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6rpx;
}

.rating-text {
	font-size: 22rpx;
	color: white;
	padding: 4rpx 10rpx;
	border-radius: 10rpx;
	min-width: 60rpx;
	text-align: center;
	
	&.rating-excellent {
		background: #4CAF50;
	}
	
	&.rating-good {
		background: #2196F3;
	}
	
	&.rating-fair {
		background: #FF9800;
	}
	
	&.rating-poor {
		background: #F44336;
	}
}

.attendance-text {
	font-size: 20rpx;
	color: white;
	padding: 2rpx 8rpx;
	border-radius: 8rpx;
	text-align: center;
	min-width: 60rpx;
	
	&.attendance-normal {
		background: #4CAF50;
	}
	
	&.attendance-late {
		background: #FF9800;
	}
	
	&.attendance-early {
		background: #FF9800;
	}
	
	&.attendance-absent {
		background: #F44336;
	}
}

.referee-comment {
	background: #f0f7ff;
	padding: 12rpx;
	border-radius: 8rpx;
	border-left: 3rpx solid #2196F3;
	margin-top: 8rpx;
}

.comment-label {
	font-size: 22rpx;
	color: #2196F3;
	font-weight: bold;
	display: block;
	margin-bottom: 6rpx;
}

.comment-text {
	font-size: 24rpx;
	color: #333;
	line-height: 1.4;
}

.referee-card {
	background: white;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 12rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	border-left: 3rpx solid #1BAE76;
}

.referee-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12rpx;
}

.referee-name {
	font-size: 26rpx;
	font-weight: 600;
	color: #333;
}

.total-matches {
	font-size: 22rpx;
	color: #1BAE76;
	font-weight: 600;
	background: rgba(27, 174, 118, 0.1);
	padding: 4rpx 12rpx;
	border-radius: 12rpx;
}

.referee-details {
	border-top: 1rpx solid #f0f0f0;
	padding-top: 12rpx;
}

.position-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 8rpx;
	margin-bottom: 12rpx;
}

.position-item {
	display: flex;
	align-items: center;
	gap: 4rpx;
}

.position-name {
	font-size: 20rpx;
	padding: 3rpx 8rpx;
	border-radius: 6rpx;
	
	&.position-main {
		background: rgba(255, 77, 79, 0.1);
		color: #ff4d4f;
	}
	
	&.position-assistant {
		background: rgba(24, 144, 255, 0.1);
		color: #1890ff;
	}
	
	&.position-fourth {
		background: rgba(250, 173, 20, 0.1);
		color: #faad14;
	}
	
	&.position-supervisor {
		background: rgba(82, 196, 26, 0.1);
		color: #52c41a;
	}
}

.position-count {
	font-size: 20rpx;
	color: #666;
}

.referee-metrics {
	display: flex;
	gap: 16rpx;
}

.metric-item {
	font-size: 20rpx;
	color: #666;
}
</style>